<template>
	<el-dialog
    v-model="dialogVisible"
    width="60%"
				style="background-color: rgba(8, 64, 132, 0.9);"
				:before-close="handleClose"
  >
		<div class="scatter_box" ref="echartDom"></div>
 </el-dialog>
</template>

<script setup lang="ts">
import { inject, ref, shallowRef, onMounted, onUnmounted, watch,toRaw,watchEffect,defineEmits,defineProps } from "vue";
const dialogVisible = ref(false)
// 接收参数
const props = defineProps({
housingSupplyStatsData: {
	type: Object,
	default: () => {},
},
});
// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const emit = defineEmits(['closeSctterDialog'])
// 字体自适应方法
const pxToRem = (px: number) => {
	const scale = document.documentElement.clientWidth / 1920;
	return Math.round(px * Math.min(scale, 3));
};
var CLUSTER_COUNT = 6;
var DIENSIION_CLUSTER_INDEX = 2;
// echarts初始化渲染
let COLOR_ALL = props.housingSupplyStatsData.colors//颜色
let legendStyle = props.housingSupplyStatsData.legendStyle//图例
let gridStyle = props.housingSupplyStatsData.gridConfig//网格
let seriesData = props.housingSupplyStatsData.seriesData//serires数据
let seriesStyle = props.housingSupplyStatsData.seriesStyle//serires配置
let chartsData = props.housingSupplyStatsData.chartsData


const getEchart = () => {
	dialogVisible.value = true;
	if (echartDom.value) {
		myChart.value = echarts.init(echartDom.value);
		// 提示框文字样式
		const tooltipTextStyle = {
			color: "#fff",
			fontSize: pxToRem(14),
		};

		// 提示框背景
		const tooltipBackgroundColor = "rgba(47, 99, 205, 0.5)";
		// 图例配置
		// 网格区域
		const gridConfig = {
			left: gridStyle.left,
			right: pxToRem(0),
			bottom: gridStyle.bottom,
			top: gridStyle.top,
			containLabel: true,
		};
		const legendConfig = {
			show: true,
			icon: 'rect',
			left: 'center',
			top: pxToRem(5),
			itemWidth: pxToRem(legendStyle.itemWidth) * 2,
			itemHeight: pxToRem(legendStyle.itemHeight) * 2,
			itemGap: pxToRem(legendStyle.itemGap) * 2,
			textStyle: {
				color: "#fff",
				fontSize: pxToRem(20),
				textStyle: {
					color: "#fff",
					fontSize: pxToRem(20),
					rich: {},
					padding: [0, 0, pxToRem(-3), 0],
				},
				data: chartsData,
			},
		};
		let seriesConfig = seriesData.map((item, index) => {
			return {
				name: chartsData[index].name,
				type: 'scatter',
				symbolSize: pxToRem(8),
				data: toRaw(seriesData[index]),

			}
		})
		const option = {
			tooltip: {
				trigger: "axis",
				axisPointer: {
					type: "line",
				},
				position: function (point: any[], params: any, dom: any, rect: any, size: any) {
					return [point[1], '10%']; // 示例：将 tooltip 定位在鼠标的水平位置和视窗顶部 10% 的位置
				},
				textStyle: tooltipTextStyle,
				backgroundColor: tooltipBackgroundColor,
				borderColor: '#66FFFF', // 设置边框颜色为红色
				borderWidth: 1, // 设置边框宽度
			},

			grid: gridConfig,
			xAxis: {
				name: '价格',
				axisLabel: {
					fontSize: pxToRem(12),
					color: 'white',
					align: 'center',
				},
				nameTextStyle: {
					color: "white",
					fontSize: pxToRem(12),
					padding: [0, 0, 50, -10],
				},
				axisTick: {
					show: false // 不显示坐标轴刻度线
				},
				splitLine: {
					show: false,
				},
				axisLine: {
					lineStyle: {
						color: "#E0E6F1",
					}
				}
			},
			yAxis: {
				name: '面积',
				axisLine: {
					show: false // 隐藏Y轴线
				},
				axisTick: {
					show: false // 不显示坐标轴刻度线
				},
				splitLine: {
					lineStyle: {
						type: "rgba(255, 255, 255, 1)",
					},
				},
				axisLabel: {
					fontSize: pxToRem(12),
					color: 'white',
				},
				nameTextStyle: {
					color: "white",
				},
			},
			legend: legendConfig,
			series: seriesConfig
		};
		myChart.value.setOption(option);
		myChart.value.on("click", (params) => {
			emit('scatterDiagramMagfiil', props.housingSupplyStatsData)
		});
	}
};
const updateChart = () => {
if (myChart.value) {
	myChart.value.dispose(); // 销毁旧图表实例
}
let COLOR_ALL = props.housingSupplyStatsData.colors//颜色
let legendStyle = props.housingSupplyStatsData.legendStyle//图例
let gridStyle = props.housingSupplyStatsData.gridConfig//网格
let seriesData = props.housingSupplyStatsData.seriesData//serires数据
let seriesStyle = props.housingSupplyStatsData.seriesStyle//serires配置
let chartsData = props.housingSupplyStatsData.chartsData
getEchart();
};

watchEffect(() => {
updateChart();
});
const handleClose = () => {
	dialogVisible.value = false
	emit('closeSctterDialog',dialogVisible.value)
}

const tempDom = (params) => {
  let tempDom = ''
  let tb = params.data.value1 >= 0 ? 'up' : 'down'
  if(tb == 'up'){
     tempDom = `<span class="triangle"></span><span class="greenFont">${params.data.value1}%</span>同比上年`
  }else{
    tempDom = `<span class="triangleRed"></span><span class="redFont">${params.data.value1}%</span>同比上年`
  }
  
   return tempDom
}
onMounted(() => {
getEchart();
window.addEventListener("resize", () => {
	if (myChart.value) {
			myChart.value.dispose(); // 销毁旧图表实例
	}
	getEchart(); // 创建新的图表实例
});
});

onUnmounted(() => {
window.removeEventListener("resize", () => {
	if (myChart.value) {
			myChart.value.dispose(); // 在组件销毁时也需要销毁图表实例
	}
});
});
</script>

<style scoped lang="less">
.scatter_box{
	width: 100%;
	height: 680px;
}
.echarts-background {
background-color: transparent !important;
}
:deep(.triangle){
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #2ecc71;
  display: inline-flex;
  align-items: center;
  margin-right: 3px;
  margin-bottom: 2px;
}
:deep(.triangleRed){
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid red;
  display: inline-flex;
  align-items: center;
  margin-right: 3px;
  margin-bottom: 2px;
  transform: rotateX(180deg);
}
:deep(.greenFont){
  color: #2ecc71;
}
:deep(.redFont){
  color: red;
}
</style>
